<!-- 分类 -->
<template>
	<div>
		<HEADER></HEADER>
		<div class="container">
			<div class="columns">
				<div class="mine-columns">

					<div class="card pageHead">
						<h1>
							分类 <p>共计 {{dataList.length}} 篇文章</p>
						</h1>
					</div>
					<div class="card">
						<div class="classList">
							<div class="item" @click="chooseClass(item.classify)" v-for="(item,index) in dataList" :key="index">
								<div class="name">{{item.classify}}</div>
								<div class="stat">共计 {{item.data.length}} 篇文章</div>
							</div>
						</div>
					</div>

				</div>
				<LeftView @buttClassfy="buttClassfy" @buttLable="buttLable"></LeftView>
				<RighthView @buttArticle="buttArticle" @buttArchive="buttArchive"></RighthView>
			</div>
		</div>
		<Gotop></Gotop>
		<FOOTER></FOOTER>
	</div>
</template>

<script>
	import HEADER from '../components/header.vue'
	import FOOTER from '../components/footer.vue'
	import LeftView from '../components/leftView.vue'
	import RighthView from '../components/righthView.vue'
	import Gotop from '../components/gotop.vue'
	export default {
		name: 'Classify',
		data() {
			return {
				dataList:[]
			}
		},
		mounted(){this.getIndexArticle();},
		methods: {
			// 请求
			getIndexArticle(){
				this.$axios.post(this.HOST + '/api/indexPage').then(res => {
					this.dataProces(res.data.data)
				}).catch(err => {console.log(err,'catch')})
			},
			// 数据处理为符合归档页需要的json形式
			dataProces(e){
				let map = {};
				for (let i=0; i<e.length;i++) {
					if (!map[e[i].classify]) {
						this.dataList.push({
							classify: e[i].classify,
							data: [e[i]]
						});
						map[e[i].classify] = e[i]
					} else {
						for (let j = 0; j < this.dataList.length; j++) {
							if (e[i].classify === this.dataList[j].classify) {
								this.dataList[j].data.push(e[i]);
								break
							}
						}
					}
				}
			},
			// 跳转至ArrayItem
			chooseClass(e) {
				console.log('跳转',e)
				this.$router.push({
					path: "/ArrayItem",
					query: {
						arr:{name:'分类',clafy:e}
					}
				});
			},
			// 分类
			buttClassfy(e){
				this.$router.push({
					path:'/ArrayItem',
					query:{arr:e}
				})
			},
			// 标签
			buttLable(e){
				this.$router.push({
					path:'/ArrayItem',
					query:{arr:e}
				})
			},
			// 最近文章
			buttArticle(e){
				this.$router.push({
					path:'/Article',
					query:{ArtID:e.ArtID},
				})
			},
			// 归档
			buttArchive(e){
				this.$router.push({
					path:'/ArrayItem',
					query:{arr:e}
				})
			},
		},
		components: {
			HEADER: HEADER,
			FOOTER: FOOTER,
			LeftView: LeftView,
			RighthView: RighthView,
			Gotop: Gotop
		},
	}
</script>

<style>


</style>
